<template>
  <div class="hello">
    <p>{{ message }}</p>
    <ul>
      <li v-for="(item,index) in names.list" :key="index">{{ item }}</li>
    </ul>
    <button @click="clickHandle">按钮</button>
    <p>{{ msg }}</p>
    
  </div>
</template>


<script>

import { ref,reactive } from "vue"

export default {
  name: 'HelloWorld',
  props:{
    msg:String

  },

  

  //组合式Api
  setup(props,ctx){

    //ctx当前实例对象（context的简写）
    //修改数据直接进行修改不用再使用this.进行修改
    console.log(ctx);
    
    //setup中没有this
    console.log(this);
    
    console.log(props.msg);
    

    //ref
    const message = ref("我是消息")

    //reactive
    const names = reactive({
      list:["lwc","zjw","yw"]
    })

    const msg = props.msg

    function clickHandle(){
      //通过message的value访问数据
      message.value = "我是按钮点击后的消息"
      
    }

    return {
      message,
      names,
      clickHandle,
      msg
    }

  }
 
}
</script>

